<!-- 轮播图 -->
<template>  
	<div class="banner" >  
		<el-carousel :interval="3000" type="card" height="220px" :style="{ width: '1200px' }"> 
			<el-carousel-item v-for="(item, index) in banner" :key="index"> 
				<img :src="item.imageUrl" @click="playMusic(item)" />  
				<div class="title">{{ item.typeTitle }}</div>   
			</el-carousel-item>  
		</el-carousel>  
	</div>  
</template>

<script setup>  
import { ref, onMounted } from 'vue';  
import { useStore } from 'vuex';  
import { useRouter } from 'vue-router';   
import { getSongUrl } from '@/network/playmusic/playmusic.js';  
import { getEverySongDetail } from '@/network/songlistdetail/songlistdetail.js';  

const props = defineProps({  
  banner: {  
    type: Array,  
    default: () => [],  
  },  
});  
  
const store = useStore(); 
const router = useRouter();  
  
 
// 定义一个函数来处理播放音乐逻辑
const playMusic = async (item) => {
  if (item.targetId === 0) return;
  if (item.targetType === 1 || item.typeTitle === 300) {
    try {
          // 获取歌曲 URL  
      const songUrlRes = await getSongUrl(item.targetId);
      store.dispatch('saveSongUrl', songUrlRes.data.data[0].url);
      // 获取歌曲详情 
      const songDetailRes = await getEverySongDetail(item.targetId);
      store.dispatch('saveSongDetail', songDetailRes.data.songs[0]);
      store.dispatch('addPlayinglist', songDetailRes.data.songs[0]);
    } catch (err) {
      console.error(err);
    }
  } else if (item.targetType === 1000) {
    router.push(`/songlistdetail/${item.targetId}`);
  } else if (item.targetType === 10) {
    router.push(`/albumdetail/${item.targetId}`);
  }
};
</script>  
  

<style lang="less" scoped>  
.banner { // banner 的样式  
    position: relative; // 定位方式为相对定位  
    img { // 图片的样式  
      width: 100%; // 宽度为父元素的100%  
      border-radius: 22px;
      
    } 
     width: 100%; 
    display: flex;
     justify-content: center;
     align-items: center; 
  }  
  .title { // 类型标题的样式  
    position: absolute; // 定位方式为绝对定位  
    right: 0;  
    bottom: 0;  
    padding: 3px 8px;   
    color: #fff; 
    font-size: 12px;  
    background: var(--themeColor); // 背景颜色为自定义的 themeColor 变量值  
  }  


  </style>